<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />

        <!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame
        Remove this if you use the .htaccess -->
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

        <title>web05</title>
        <style>
            /* selector{속성 : 값 ; } */
           /*   *은 전체   */
            
            body{padding:2px 3px 4px 5px;  /*위 오른쪽 아레 왼쪽  */
                 padding-left:5px;
                 padding-right:5px;
                 
                 /* 위아래 10px 왼쪽오른쪽 5px   */
                 margin:10px 5px;
                 /*  위10 오른쪽5 아레왼쪽3    */
                 margin:10px 5px 3px;  
            /*   
                 background-image: url("55302.jpg");
                 background-color:#ffffee
                 background-repeat:no-repeat;
                 background-position:center;
                 background-position-x:right;
                 background-position-y:top;    */
                 /* css는 대부분 여러속성을 한번에 쓰는 shotcut 이 있다. */
                 background:#ffffee url("55302.jpg") no-repeat right top ;
            }
           u{ text-decoration: none;}
           a{  /*  모든 a에 적용   */
               }
           u a{ /* u의 하위에 있는 모든 a에 적용  */
               
               }
           u div a {   /* u밑에 div아레 a에 적용    */  
               }    
            #d{
                /*  id 가 d인 모든것에 적용   */
            }   
            .title{
                /* class 가 title인 모든것에 적용 */
            }   
            h1.title{
                /*   h1 이면서 class가 title인것에 적용   */
            }   
            h2#big{
                /* h2이면서 id = big에 적용     */
            }  
            h2#big ul{
                /*  h2이면서 id == big의 하위의 ul에 적용  */
            }   
            a:hover{ /*a 에 마우스가 올라가면 그떄만 적용 */
              background-color:yellow;
            }
            a:active{
                /*a를 마우스로 누르고 있을때만 적용  */
               font-size:2em;
            }
            a:visited{
                /* 한번 눌렀던 a태그에 적용   */
                color:#00FFFF;
            }
            a:hover li{
                /* a에 마우스가 올라갈때만 그 하위의 li에 적용  */
            }
            a#div p:hover li{
                
            }
            div , span, li{
                /* div span li 모두에 적용  */
            }
            
               
            div{  /* display:block은 라인 breaker   */ 
                display:inherit;
            }   
            span{  /* display: inline은 라인을 유지 */
                display:inherit;   /* inherit 기존설정 유지 */
            }   
            h1{  /*원래는 라인을 깨는데 못깨트리게 바꿈  */
               background-color:yellow;
               color:red;
                display:inline;
                position:inherit;    /* 기본   */
                position:absolute;   /* 절대 좌표  */
               left:100px;
               top:100px;    /*(100,100)위치에 나온다   */
               position:fixed;    /* 화면의 어느 위치에 고정   */
              left:100px;
              top:100px;
              /* absolute나 fixed 는 공간을 차지하지 않는다.   */
              position:relative;
              left:100px;
              top:100px;
              /* relative는 공간을 차지하며 원래있던 이전공간을 남에게 주지 않는다. */
            }   
            /* 보기 싫을땐 none 하면 안보인다.  */
           article{ color:#00FFFF;
                cloor:brown;
                color:rgb(233,20,20);
               /*  text-align: center;    */
                text-decoration: blink;
                /* 첫글자만 대문자로  */
                text-transform:capitalize;
                /* 첫문장 들여쓰기 ()  */
                text-indent:10px;
            }
        
        
        
        
        </style>
        
        
        <meta name="description" content="" />
        <meta name="author" content="Choongang31" />

        <meta name="viewport" content="width=device-width; initial-scale=1.0" />

        <!-- Replace favicon.ico & apple-touch-icon.png in the root of your domain and delete these references -->
        <link rel="shortcut icon" href="/favicon.ico" />
        <link rel="apple-touch-icon" href="/apple-touch-icon.png" />
    </head>

    <body>
        <article>today 은 금요일 입니다.</article>
        LineBreaker : div h1~h6  li tr 
        
        
        
           <script>
               u=document.createElement("u");
               u.innerHTML="내가만든 u";
               document.body.appendChild(u);
           </script>
           
                <h1 class="title">web05</h1>
                 
           <script>
               a=document.createElement("a");
               a.href="http://naver.com";
               a.innerHTML="네이버 가기 ";
               u.appendChild(a);
          div=document.createElement("div");
          
          u.appendChild(div);
          //div에 글자를 넣어주자 
          tn=document.createTextNode("텍스트노드입니다.");
          div.appendChild(tn);
          
          h1=document.getElementsByTagName("h1")[0];
          console.log("h1=",h1.innerHTML);
          h1first=h1.firstChild;
          console.log("h1first=",h1first);
          data=h1first.data;
          console.log("h1first data",data);
          //어디의 자식으로 .넣어라(무엇을,u전에다가 )
          document.body.insertBefore(h1,u);
           </script>
          <div id="d">   
               안녕하세요 
                     <img id="img" src="55302.jpg" width="50">
          </div>
           
           <script>
               d=document.getElementById("d");
               img=document.getElementById("img");
               
               document.write("<br>d의 childNodes="+d.childNodes);
               document.write("<br>d의 nodeName="+d.nodeName);
               document.write("<br>d의 nodeType="+d.nodeType);
               document.write("<br>d의 nodeValue="+d.nodeValue);
               
               document.write("<br>img의 childNodes="+img.childNodes);
               document.write("<br>img의 nodeName="+img.nodeName);
               document.write("<br>img의 nodeType="+img.nodeType);
               document.write("<br>img의 nodeValue="+img.nodeValue);
               
               document.write("<br>d.childNodes[0].의 childNodes="+d.childNodes[0].childNodes);
               document.write("<br>d.childNodes[0].의 nodeName="+d.childNodes[0].nodeName);
               document.write("<br>d.childNodes[0].의 nodeType="+d.childNodes[0].nodeType);
               document.write("<br>d.childNodes[0].의 nodeValue="+d.childNodes[0].nodeValue);
              
               document.write("<br>d.childNodes[1].의 childNodes="+d.childNodes[1].childNodes);
               document.write("<br>d.childNodes[1].의 nodeName="+d.childNodes[1].nodeName);
               document.write("<br>d.childNodes[1].의 nodeType="+d.childNodes[1].nodeType);
               document.write("<br>d.childNodes[1].의 nodeValue="+d.childNodes[1].nodeValue);
              
           </script>
           
          
    </body>
</html>
